<template>
  <main-layout id="home">
    <!-- 首页页面 头部 -->
    <div class="top">
      <!-- seek 搜索 -->
      <div id="oneseek">
        <input type="text" class="seek" @click="searchEvt"  placeholder="Ins风配饰" />
        <button class="btn1"  @click="signs">{{values}}</button>
      </div>
          <div class="banner">
            <!-- banner轮播 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#c1ab96">
              <van-swipe-item><img src="../../images/home/banner1.png"></van-swipe-item>
              <van-swipe-item><img src="../../images/home/banner2.png"></van-swipe-item>
              <van-swipe-item><img src="../../images/home/banner1.png"></van-swipe-item>
              <van-swipe-item><img src="../../images/home/banner2.png"></van-swipe-item>
            </van-swipe>
          </div>
        <!-- sort分类 -->
        <div id="sort">
          <div>限时折扣</div>
          <div>本周爆款</div>
          <!-- classify 分类 -->
          <div @click="classify">分类</div>
        </div>
    </div>

    <!-- main --------------->
    <!-- 折扣 -->
    <div>
      <div class="main-top">
        <div class="time">
          <span>限时折扣</span>
          <!-- count down 倒计时 -->
          <div class="count-down">
            <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          </div>
        </div>
        <p>更多</p>
      </div>
      <!-- 折扣衣服 -->
      <!-- discount 折扣 -->
      <div class="discount" >
        <div class="main-botton">
            <div class="first" v-for="item in productList" :key="item.id">
              <img :src="item.image">
                <span>{{item.title}}</span>
                <p>{{item.prSice}}</p>
                <span>原</span>
                <s>{{item.saleNum}}</s>
            </div>
            <!-- <div class="first">
              <img src="../../images/home/p0.jpg">
                <span>OMINI简约上衣T恤</span>
                <p>¥ 523.6</p>
                <span>原</span>
                <s>￥1233.00</s>
            </div>
            <div class="first">
              <img src="../../images/home/p0.jpg">
                <span>OMINI简约上衣T恤</span>
                <p>¥ 523.6</p>
                <span>原</span>
                <s>￥1233.00</s>
            </div> -->
        </div>
      </div>
    </div>

    <div>
      <div class="main-top">
        <span> 本周爆款</span>

        <p>更多</p>
      </div>
      <!-- 爆款衣服 -->
     <div class="">
        <div class="main-botton">
           <div class="first" v-for="item in productList" :key="item.id">
              <img :src="item.image">
                <span>{{item.title}}</span>
                <p>{{item.prSice}}</p>
                <span>原</span>
                <s>{{item.saleNum}}</s>
            </div>
            <!-- <div class="first">
              <img src="../../images/home/p0.jpg">
              <span>OMINI简约上衣T恤</span>
              <p>¥ 523.6</p>
            </div>
            <div class="first">
              <img src="../../images/home/p0.jpg">
              <span>OMINI简约上衣T恤</span>
              <p>¥ 523.6</p>
            </div> -->
        </div>
      </div>
    </div>

    <div class="recommend">
      <div class="you"> 为你推荐</div>
        <div class="remdProduct">
              <div class="prod" v-for="it in prodList" :key="it.id">
                <img :src="it.image">
                <h5>{{it.title}}</h5>
                <span>满300减30</span>
                <span>店铺领券</span>
                <p>¥ {{it.price}}</p>
                <div class="cart">
                  <van-icon  @click.stop="handleAddToCart(it)" name="shopping-cart-o" />
                </div>

              </div>
            <!-- <div class="prod">
              <img src="../../images/home/p0.jpg">
              <h5>OMINI简约及黑色上衣T恤</h5>
              <span>满300减30</span>
              <span>店铺领券</span>
              <p>¥ 523.6</p>
            </div> -->
          </div>
    </div>
    <!-- job页脚 -->
    <div class="job">
      <span>没有更多了哦~</span>
    </div>

    <!-- <h3 @click="loginEvt">去登陆</h3> -->
  </main-layout>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { getProd } from '../../apis/me/ajaxApi'

Vue.use(Toast)
export default {
  data () {
    return {
      values: '签到',
      time: 30 * 60 * 60 * 1000,
      productList: [],
      prodList: []
    }
  },
  created () {
    // const xhr = new XMLHttpRequest()
    // xhr.open('GET', 'http://rap2api.taobao.org/app/mock/298670/api/baokuan')
    // xhr.send()
    // xhr.onreadystatechange = () => {
    //   if (xhr.readyState === 4) {
    //     if (xhr.status === 200) {
    //       const res = xhr.responseText
    //       // console.log(res)
    //       this.productList = JSON.parse(res).data.list.splice(0, 3)
    //     }
    //   }
    // }
    // 获取推荐商品数据
    getProd().then(data => {
      console.log(data)
      this.productList = data.data.list.splice(0, 3)
      this.prodList = data.data.list
      // console.log(this.prodList, 1111111)
    }).catch(e => {
      console.log('111')
    })
  },
  methods: {
    // loginEvt () {
    //   this.$router.push('/login')
    // }
    signs () {
      this.values = '已签到'
      // Toast({
      //   message: '签到成功',
      //   position: 'center'
      // })
      Toast({
        message: '签到成功',
        icon: 'like-o'
      })
    },
    searchEvt () {
      this.$router.push('/search')
    },
    classify () {
      this.$router.push('/types')
    },
    // 加入购物车
    handleAddToCart (prod) {
      // 解构当前商品中的各属性
      const { id, title, price, image } = prod
      // 构建当前选购的商品对象
      const currentProduct = {
        id,
        title,
        price,
        image,
        amount: 1
      }
      // 保存到 store中
      // 组件中不能直接调用 mutation方法，需要使用store.commit()提交
      this.$store.commit('cartModule/addToCart', { currentProduct })
      this.$toast({
        type: 'success',
        message: '加入购物车成功',
        icon: 'like'
      })
    }
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
// 引入公共样式文件
@import "../../style/common.less";
// .top{
//   background: #fff !important;
//   // height: 500px;

// }
#home {
  background-color: rgba(193, 171, 150, 1);
}

// 搜索
#oneseek {
  color: #c1ab96;
  background: #fff !important;
  height: 65px;
  // border: 1px solid black;
  padding: 12px;
  flex: 1;
  display: flex;
  justify-content: space-between;
      font-size: 14px;
}
// input
.seek {
  &::-webkit-input-placeholder {
    color: #c1ab96;
  }
  border: 0;
  background-color: rgba(234, 233, 229, 1);
  border-radius: 20px;
  width: 270px;
  height: 35px;
  flex: 1;
  margin-right: 20px;
  padding-left: 20px;
}
.btn1 {
  border: 0;
  width: 60px;
  border-radius: 16px;
  height: 30px;
  color: #c1ab96;
  margin-top: 2px;
}
#sort {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin-top: 40px;
}
#sort > div {
  // border: 1px solid black;
  text-align: center;
  line-height: 60px;
  width: 125px;
  height: 60px;
  font-size: 14px;
  color: #71a284;
  font-weight: 700;
}

// 轮播图
.banner {
  height: 180px;
  background: #fff;
  img{
    width: 100%;
    height: 222px;
  }
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 180px;
    text-align: center;
    // background-color: pink;
  }
//     .imgdad{
//   height:180px;
// }
.banner-img {
  display: flex;
  flex-direction: row;
  // display: block;
  // margin: auto;
  width: 100%;
  height: 180px;
}

// 限时折扣
.main-top{
  margin: 14px 0 14px 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
   p{
     font-weight: 400;
  }
}
.time{
  display: flex;
}
.count-down{
  margin-top: 0px;
  margin-left: 14px;
}
.main-botton{
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  // width: 380px;
  // height: 150px;
  padding: 18px 0px 30px 0px;
  background: #fff;
  margin-left: 18px;
  margin-right: 18px;
}
.main-botton>div{
    // color: #c1ab96;
  text-align: center;
  line-height: 20px;
  // border: 1px solid black;
  width: 100px;
  height: 150px;
  font-size: 14px;
  // background: skyblue;
}
.main-botton>div>img{
  width: 100px;
  height: 92px;
}
.main-botton>div>p{
  color: #c1ab96;
  font-weight: 700;
}
// 为你推荐
.you{
  color: #fff;
    font-size: 16px;
  // margin: 10px;
  font-weight: 700;
   margin: 14px 0 14px 6px;
}
 .remdProduct{
   margin: 0 20px;
   display: flex;
   flex-wrap:wrap ;
   justify-content: space-between;
      .prod{
        background: #fff;
        box-shadow: 0px 0px 20px #c1bfbf;
        width: 165px;
        border-radius: 6px;
        margin-bottom: 16px;

        img{
          height: 165px;
          width: 165px;
        }
        h5{
          font-size: 14px;
          margin-left: 8px;
        }
        span{
          font-size: 12px;
          border: 1px solid #8E7E6F;
          color: #8E7E6F;
          padding: 2px;
          border-radius: 3px;
          margin-left: 8px;
        }
        p{
          font-size: 14px;
          font-weight: 700;
          margin-left: 8px;
          margin-top: 5px;
        }
        .cart{
          float: right;

          // display: flex;
          // justify-content: flex-end;
          // justify-content: flex-start;
          // align-self: flex-end;

        }
      }
 }
.job{
  text-align: center;
  margin-top: 10px;
  padding: 10px;
  font-weight:700;
  font-size:16px;
  color: #fff;
}
// 倒计时
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: black;
  }
  .block {
    font-weight: normal;
    text-align: center;
    line-height: 24px;
    display: inline-block;
    height: 24px;
    width: 24px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background-color: black
  }
</style>
